<template>
  <div class="refund-rate-switch">
    <div class="refund">
      <span class="context">返点：</span>
      <span class="low" 
        :class="getRefundRate == 0 ? 'active' : ''"
      >0.0%
      </span>
      <span 
        class="switch button-selected" 
        @click="setRefund"
        >
        <span 
          class="switch-control"
          :class="on ? 'off' : 'on'"
          >
        </span>
      </span>
      <span class="high" 
        :class="getRefundRate == 0.025 ? 'active' : ''"
        >2.5%
      </span>
      <span class="unknown-num">
        (196882.00)
      </span>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapGetters } from 'vuex';
const HIGHT_RATE = 0.025
const LOW_RATE = 0
export default {
  data() {
    return {
      on: false,
    }
  },
  methods: {
    // 返点切换
    setRefund() {
      this.on = !this.on
      // 切换返点
      this.getRefundRate == LOW_RATE 
       ? this.setRefundRate(HIGHT_RATE) 
       : this.setRefundRate(LOW_RATE)
    },
    ...mapMutations('lottery', {
      setRefundRate: 'SET_REFUND_RATE'
    })
  },
  computed: {
    ...mapGetters('lottery', ['getRefundRate'])
  }
}
</script>

<style lang="stylus" scoped>
  @import '~@/assets/styles/variables.styl'
  .refund-rate-switch 
    .refund
      margin-left 10px
      display flex 
      align-items center
      .low  
        &.active
          color $color-theme-red
      .high 
        &.active
          color $color-theme-red
      .unknown-num 
        margin-left 10px
      .switch
        width 35px
        height 16px
        margin 0 10px
        border-radius 4px
        vertical-align top
        position relative
        box-sizing border-box
        cursor pointer
        .switch-control
          position absolute
          left 0
          top 0
          right 0
          width 15px
          height 14px
          border-radius 4px
          background #fff
          box-sizing border-box
          cursor pointer 
          &.on
            transition all .1s ease
          &.off
            transform translateX(18px)
            transition all .1s ease
</style>